<template>
  <div class="login">
    <div class="box">
      <!-- 登录 -->
      <div class="login">
        <div class="login_top">
          <img
            src="src/assets/img/user_img.jpg"
            style="border-radius: 50px"
            alt="头像"
          />
          <h2>登录</h2>
        </div>
        <div class="login_bottom">
          <el-form
            ref="ruleFormRef"
            :model="loginForm"
            status-icon
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item prop="email">
              <el-input
                v-model="loginForm.email"
                type="email"
                autocomplete="off"
                placeholder="请输入邮箱"
                prefix-icon="Message"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                autocomplete="off"
                placeholder="请输入密码"
                prefix-icon="Lock"
                show-password
                @keyup.enter="login"
              />
            </el-form-item>

            <el-form-item class="register-tools">
              <div style="text-align: right; width: 100%">
                <a @click="for_got_password">忘记密码?</a>
              </div>
              <div style="width: 100%">
                <el-button
                  style="width: 100%"
                  class="item btnRegister"
                  @click="login"
                  >登录</el-button
                >
              </div>
            </el-form-item>
          </el-form>

          <div>
            <span>还没有账号?前往</span>
            <a style="color: blue" @click="reg"> 注册</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
import { userLogin } from "../../http/user.js";
export default {
  data() {
    return {
      loginForm: {
        email: "",
        password: "",
      },
      rules: {
        email: [
          {
            type: "string",
            required: true,
            message: "必填项",
            triggler: "blur",
          },
          { type: "email", message: "请输入正确格式的邮箱" },
        ],
        password: [
          {
            type: "string",
            required: true,
            message: "必填项",
            triggler: "blur",
          },
        ],
      },
    };
  },
  methods: {
    reg() {
      this.$router.push("/reg");
    },
    for_got_password() {
      this.$router.push("/forgotpassword");
    },
    login() {
      let data = {
        email: this.loginForm.email,
        password: this.loginForm.password,
      };
      var that = this;
      this.$refs["ruleFormRef"].validate(function (valid) {
        if (valid) {
          userLogin(data)
            .then((res) => {
              if (res.code == 1) {
                // 登录成功
                // console.log(res.code); //1
                // console.log(res.data.userinfo);
                // console.log(res.data.userinfo.token);
                let str = JSON.stringify(res.data.userinfo);
                localStorage.setItem("user_info", str);
                // userinfo:{
                //   binding:0,
                //   createTime:"2023-10-30T15:20:02.000+00:00",
                //   email:"",
                //   id:200,
                //   state:1,
                //   token:"...",
                //   userName:""
                //   userType:""
                // }
                // console.log(res.msg); //"成功"
                // console.log(res.success); //true
                ElMessage.closeAll();
                ElMessage({
                  message: "登录" + res.msg,
                  type: "success",
                });
                that.$router.push({
                  path: "/userinfo",
                });
              } else {
                ElMessage.closeAll();
                ElMessage({
                  message: "登录" + res.msg,
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        } else {
          console.log("error submit!");
          return false;
        }
      });
    },
  },
};
</script>

<style  scoped>
/* 清除内、外间距 */
* {
  margin: 0;
  padding: 0;
}

/* 去除a标签的下划线 */
a {
  text-decoration: none;
}

/* 去除li标签的序列符号（小黑点） */
li {
  list-style: none;
}

body {
  background-image: linear-gradient(to right, #5e2275, #260c6e);
}

.box {
  /* 分布式布局 */
  margin: 0 auto;
}

/* 登录、注册外div共同样式 */
.login {
  width: 100%;
  height: 30.5rem;
  background-color: white;
  border-radius: 0.5rem;
  margin: 0 auto;
}

/* 登录、注册顶部div共同样式 */
.login_top {
  width: 100%;
  height: 12rem;
  color: white;
  border-radius: 0.5rem 0.5rem 0 0;
  text-align: center;
}

.login_top {
  background: rgb(252, 253, 251);
}

.login_top img {
  width: 5.5rem;
  height: 5.5rem;
  margin-top: 2rem;
}

.login_bottom {
  text-align: center;
  padding: 1rem 1rem 0 1rem;
}

/* 登录、注册表单共同样式 */
.login_bottom .input {
  width: 100%;
  height: 2.5rem;
  margin-top: 1rem;
  padding-left: 0.6rem;
  border-radius: 0.6rem;
  border: 0.1rem solid silver;
  /* 去除表单点击后出现的边框 */
  outline: none;
  color: reb(107, 107, 107);
}

.login_bottom p {
  font-size: 0.8rem;
  margin-top: 1rem;
}

/* 使复选框与后面文字水平对齐 */
.login_bottom p input {
  vertical-align: middle;
  /* vertical 垂直的  middle 中间 */
}

.login_bottom p span {
  margin-right: 0.5rem;
  color: #757575;
}

.login_bottom p a {
  color: rgb(42, 141, 2);
}

/* 登录、注册按钮共同样式 */
.login_bottom button {
  width: 18rem;
  height: 2.8rem;
  color: white;
  /* margin-top: 2rem; */
  border-radius: 0.6rem;
  border: none;
}

.login_bottom button {
  background: rgb(92, 17, 233);
  margin-top: 1rem;
}

/* 鼠标滑过按钮出现阴影效果 */
.login_bottom button:hover {
  box-shadow: 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.3);
}

:deep .el-form-item__content {
  display: block;
}
</style>